<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>第一个Vue程序</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div class="first">
            <!-- 使用 v-model 指令可以为表单元素绑定响应式数据 -->
            <input type="text" v-model="nickname">
            <!-- 通常 {{ }} 被称作 插值 表达式 -->
            <p>{{ nickname }}</p>
        </div>

        <script type="text/javascript">
            // 指定创建Vue实例时的相关配置
            const options = {
                data: function(){
                    return { nickname: '开发喵' }
                }
            }
            // 采用 Vue.js 3.x 中提供的支持创建 Vue 实例
            const app = Vue.createApp( options );
            // 挂载
            const vm = app.mount( ".first" );
            console.log( vm );
        </script>
        
    </body>
</html>